/* 
 * 全局样式重置，将所有元素的外边距（margin）和内边距（padding）都设置为0，
 * 这样可以消除不同浏览器默认样式带来的差异，方便后续统一布局。
 */
 *{
  margin: 0;
  padding: 0;
}

/* 
* 去除无序列表（ul）、有序列表（ol）及其列表项（li）的默认样式，
* 例如默认的项目符号（对于无序列表）和序号（对于有序列表）等，
* 便于自定义列表的外观样式。
*/
ul, ol, li{
  list-style: none;
}

/* 
* 统一设置链接（a标签）在各种状态下（包括未访问时（:link）、已访问时、鼠标悬停时（:hover）、
* 被激活时（:active）以及作为目标时（:target））的文本装饰（text-decoration）为无，
* 也就是去除下划线等默认装饰效果，并且将链接的文字颜色统一设置为#333（深灰色），
* 使页面中的链接外观保持一致且符合整体的视觉风格。
*/
a, a:hover, a:target, a:link, a:active{
  text-decoration: none;
  color: #333;
}

/* 
* 让图片（img标签）元素能够自适应其父容器的大小，宽度（width）和高度（height）都设置为100%，
* 使其占满整个父元素的空间，同时将图片以块级元素（display: block）的形式显示，
* 避免一些因内联元素特性导致的布局问题，例如图片底部出现空白间隙等情况。
*/
img{
  width: 100%;
  height: 100%;
  display: block;
}

/* 
* 定义一个类名为.container的样式规则，它通常用于创建页面中的容器元素，
* 设置其宽度为1200px，并且通过 margin: 0 auto 让该容器在水平方向上自动居中，
* 方便在页面中对内容进行布局，使其在不同屏幕宽度下能保持较好的居中显示效果。
*/
.container{
  width: 1200px;
  margin: 0 auto;
}

/* 
* 页面头部（.header）的样式定义，设置其高度为60px，背景颜色为 skyblue（天蓝色），
* 文字颜色为白色（#fff），字体大小为30px，字体加粗（font-weight: 700），
* 通过 flex 布局（display: flex）来让内部的元素在水平方向（justify-content: center）
* 和垂直方向（align-items: center）都居中对齐，使其外观更加整齐美观，
* 同时设置其定位方式为相对定位（position: relative），方便内部绝对定位元素的定位参考。
*/
.header{
  height: 60px;
  background-color: skyblue;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 
* 定义头部（.header）内部的p标签元素的样式，通过绝对定位（position: absolute）将其定位到右侧，
* 距离右边距20px的位置（right: 20px），设置字体大小为18px，字体加粗程度为500（font-weight: 500），
* 初始状态下将其设置为不显示（display: none），后续可能会通过添加.active类名等方式来控制其显示隐藏。
*/
.header > p{
  position: absolute;
  font-size: 18px;
  right: 20px;
  font-weight: 500;
  display: none;
}

/* 
* 当头部（.header）内部的p标签元素拥有.active类名时，将其显示出来（display: block），
* 这通常用于通过JavaScript等脚本语言根据特定的业务逻辑来切换该元素的显示状态，
* 比如在满足某些条件时显示该元素，不满足时隐藏它。
*/
.header > p.active{
  display: block;
}

/* 
* 定义头部（.header）内部p标签下的按钮（button）元素的鼠标样式为手型（cursor: pointer），
* 当鼠标悬停在按钮上时会显示手的图标，提示用户可以点击操作，
* 同时设置按钮的内边距（padding）为上下3px、左右10px，让按钮看起来更有层次感，外观更合适。
*/
.header > p > button{
  cursor: pointer;
  padding: 3px 10px;
}

/* 
* 定义头部（.header）内部p标签下的链接（a标签）元素的文字颜色为红色（color: red），
* 这样可以突出显示该部分链接，使其与其他普通链接在颜色上有所区分，
* 吸引用户的注意力，可能用于一些重要的操作链接等情况。
*/
.header > p > a{
  color: red;
}

/* 
* 页面底部（.footer）的样式定义，设置其高度为300px，背景颜色为 skyblue（天蓝色），
* 通过 flex 布局（display: flex）让内部的元素在水平方向（justify-content: center）
* 和垂直方向（align-items: center）都居中对齐，同时设置字体大小为100px，文字颜色为白色（#fff），
* 使其在页面底部呈现出较为醒目的外观效果，一般用于展示版权信息、联系方式等内容。
*/
.footer {
  height: 300px;
  background-color: skyblue;
  display: flex;
  font-size: 100px;
  color: #fff;
  justify-content: center;
  align-items: center;
}